<%-- 
    Document   : Test_table
    Created on : 2020-5-3, 23:13:46
    Author     : gen3
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>table模块快速使用</title>
  <link rel="stylesheet" href="/layui/css/layui.css" media="all">
  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
 
<table id="demo" lay-filter="test"></table>
 
<script src="/layui/layui.js"></script>
<script>
layui.use('table', function(){
  var table = layui.table;
  
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 312
    ,url: 'manager/SelectUsers' //数据接口
    ,page: false //开启分页
    ,parseData: function(res){ //res 即为原始返回的数据
    return {
      "code": res.code, //解析接口状态
      "msg": res.message, //解析提示文本
      "count": res.count, //解析数据长度
      "data": JSON.parse(res.data)
    };}
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80},{field:"email",title:"电子邮件地址",width:80},
      {fixed: 'right', width:150,title: '操作',align:'center', toolbar: '#barDemo'}
    ]]
    ,toolbar: true
  });
   //监听工具条 
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
  var data = obj.data; //获得当前行数据
  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
  var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
   if(layEvent === 'del'){ //删除
    layer.confirm('真的删除行么', function(index){
        $.ajax({
            url: "manager/DeleteUser",
            type: "GET",
            data: {"userId": data.id},
            success: function (resp) {
                console.log(resp);
                console.log(resp.code);
                if (resp.code === 0) {
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                } else {
                    alert("error message is " + resp.errmsg);
                }
            },
            error: function (req, status, error) {
                alert("异常，错误信息：" + error);
                return false;
            }
        });
        layer.close(index);
      
      
    });
}
  });
  
});
</script>
<script type="text/html" id="barDemo">
  <a class="layui-btn" lay-event="del">删除</a>
</script>
</body>
</html>
